<template>
	<view class="order-manage">
		<!-- 顶部搜索及筛选区域 -->
		<view class="top-bar">
			<view class="cardform" labelPosition="left" :model="orderinfo" :rules="rules" ref="uForm">
				<view class="top">
					<view style="font-size: 40rpx;font-weight: bold ">订单信息</view>
					<view style="color: red;">{{orderinfo.orderstatus}}</view>
				</view>
				<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;margin-bottom: 20rpx;">
				</view>
				<view class="body">
					<view style="margin-bottom: 15rpx;">订单号：{{orderinfo.ordernumber}}</view>
					<view style="margin-bottom: 15rpx;">服务项目：{{orderinfo.orderitem}}</view>
					<view style="margin-bottom: 15rpx;display: flex;gap: 30rpx;">
						<view>服务门店：{{orderinfo.orderaddress}}</view>
						<view>
							<image src="../../img/车联网服务商家端-08评价管理-已完成订单_slices/plane@3x.png"
								style="width: 30rpx;height: 30rpx;" mode="widthFix"></image>
						</view>
					</view>
					<view style="margin-bottom: 15rpx;">下单时间：{{orderinfo.ordertime}}</view>
					<view style="margin-bottom: 15rpx;">预约时间：{{orderinfo.orderevaluatetime}}</view>
					<view style="margin-bottom: 15rpx;">车辆：{{orderinfo.carinof}}</view>
					<view style="margin-bottom: 15rpx;">备注：{{orderinfo.remark}}</view>
				</view>
			</view>
			<view class="cardform1" labelPosition="left" :model="ordertail">
				<view class="top">
					<view style="font-size: 40rpx;font-weight: bold ">订单详情</view>
				</view>
				<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;margin-bottom: 20rpx;">
				</view>
				<view v-for="(item, index) in orderdetail.orderproject" :key="index">
					<view style="margin-bottom: 15rpx;display: flex;gap: 400rpx;">
						<view>{{item.projectname}}</view>
						<view>{{item.projectprice}}</view>
					</view>
				</view>
				<view v-for="(item, index) in orderdetail.orderadditional" :key="index">
					<view style="margin-bottom: 15rpx;display: flex;gap: 400rpx;">
						<view>{{item.additionalname}}</view>
						<view>{{item.additionalprice}}</view>
					</view>
				</view>
				<view style="margin-bottom: 15rpx;display: flex;gap: 450rpx;">
					<view>原价</view>
					<view>
						{{orderdetail.price}}
					</view>
				</view>
				<view style="margin-bottom: 15rpx;display: flex;gap: 420rpx;">
					<view>店家优惠</view>
					<view>
						{{orderdetail.discount}}
					</view>
				</view>
				<view style="margin-bottom: 15rpx;display: flex;gap: 450rpx;">
					<view>优惠券</view>
					<view>
						{{orderdetail.card}}
					</view>
				</view>
				<view style="margin-bottom: 15rpx;display: flex;gap: 420rpx;">
					<view>支付金额</view>
					<view style="font-weight: bold;">
						{{orderdetail.Payment}}
					</view>
				</view>
			</view>
			<view class="cardform2" labelPosition="left" :model="evaluate">
				<view style="font-size: 40rpx;font-weight: bold ">评价结果</view>
				<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;margin-bottom: 20rpx;">
				</view>
				<view style="margin-bottom: 15rpx;">评价时间：{{evaluate.time}}</view>
				<view style="margin-bottom: 15rpx;display: flex;">
					<view>评价结果：{{evaluate.score}}</view>
					<view><u-rate :count="count" v-model="evaluate.score"></u-rate></view>
				</view>
				<view style="margin-bottom: 15rpx;">评语：{{evaluate.Comments}}</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderinfo: {
					orderstatus: "已完成",
					ordernumber: "121212112487878",
					orderitem: "车辆保养",
					orderaddress: "大包车辆维修店",
					ordertime: "2023-03-08 17:40",
					orderevaluatetime: "2023-03-08 17:40",
					carinof: "奔驰FWE4/豫A98FHJ",
					remark: "",
				},
				orderdetail: {
					orderproject: [{
						projectname: "车辆清洗",
						projectprice: "$39.90"
					}],
					orderadditional: [{
						additionalname: "车辆附加费用",
						additionalprice: 0
					}],
					price: "$59.90",
					discount: "-$20",
					card: "-$10",
					Payment: "$29.9"
				},
				evaluate:{
					time:"2023-04-10 11:09",
					score:4,
					Comments:"评语评语评语评语"
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	.order-manage {
		background-color: #f5f5f5;
		min-height: 100vh;
		height: 1600rpx;
	}

	/* 顶部搜索及筛选 */
	.top-bar {
		padding: 10px;
		background-color: #2979ff;
		height: 200rpx;
	}

	.cardform {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		height: 600rpx;
		border-radius: 15rpx;
		padding-top: 15rpx;
		background-color: white;
		margin-bottom: 15rpx;
	}

	.cardform1 {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		height: 450rpx;
		border-radius: 15rpx;
		padding-top: 15rpx;
		background-color: white;
		margin-bottom: 15rpx;
	}
.cardform2 {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		height: 300rpx;
		border-radius: 15rpx;
		padding-top: 15rpx;
		background-color: white;
		margin-bottom: 150rpx;
	}
	.top {
		display: flex;
		gap: 380rpx;
		margin-top: 15rpx;
	}

	.body {
		margin-bottom: 15rpx;
	}
</style>